<template>
  <div class="top-nav">
    <div class="top-nav-container">
      <!-- Logo 区域 -->
      <div class="logo-container"></div>

      <!-- 快捷菜单区域 -->
      <div class="user-info">
        <el-popover placement="bottom" width="200" trigger="hover">
          <template #reference>
            <span class="user-link">{{ username }}</span>
          </template>
          <div class="popover-panel">
            <div class="user-info-container">
              <div class="avatar-container">
                <img src="https://p0.meituan.net/ingee/a29ea7a6829bbee66caa6da8bb0928dc14919.png" alt="用户头像" class="user-avatar" @click="goToMyPage" />
              </div>
              <div class="user-details">
                <div class="username">{{ username }}</div>
                <div>评价 {{ reviewCount }} 粉丝 {{ fansCount }}</div>
              </div>
            </div>
            <div class="settings-container">
              <span @click="goToSettings">个人设置</span> |
              <span @click="logout">退出</span>
            </div>
          </div>
        </el-popover>

        <span class="divider">|</span>

        <el-popover placement="bottom" width="160" trigger="hover">
          <template #reference>
            <span class="user-link badge-link">
              消息
              <el-badge :value="messageCount" class="badge-inline" />
            </span>
          </template>
          <div class="popover-panel">
            <el-button style="width: 100%" size="small" @click="clearMessages">忽略</el-button>
          </div>
        </el-popover>

        <span class="divider">|</span>

        <el-popover placement="bottom" width="160" trigger="hover">
          <template #reference>
            <el-button type="text">个人中心</el-button>
          </template>
          <div class="popover-panel">
            <p>我的评价</p>
            <p>我的收藏</p>
            <p>我的订单</p>
          </div>
        </el-popover>

        <span class="divider">|</span>

        <el-popover placement="bottom" width="160" trigger="hover">
          <template #reference>
            <el-button type="text">商户服务</el-button>
          </template>
          <div class="popover-panel">
            <p>商户中心</p>
            <p>商户合作</p>
          </div>
        </el-popover>

        <span class="divider">|</span>

        <el-popover placement="bottom" width="160" trigger="hover">
          <template #reference>
            <el-button type="text">帮助中心</el-button>
          </template>
          <div class="popover-panel">
            <p>平台规则</p>
            <p>联系客服</p>
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const username = ref('等日落')
const messageCount = ref(2)
const reviewCount = ref(1)
const fansCount = ref(0)

function logout() {
  userStore.logout()
  router.push('/Huanglogin')
}

function clearMessages() {
  messageCount.value = 0
  ElMessage.success('消息已清空')
}

function goToSettings() {
  router.push('/HuangMy')
}

function goToMyPage() {
  router.push('/HuangMy')
}
</script>

<style scoped>
/* 顶部导航栏整体深色风格 */
.top-nav {
  background: #242323;
  padding: 0;
}

.top-nav-container {
  transform: scale(0.9);
  transform-origin: top left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 45px;
  padding: 0 20px;
  margin-left: 9%;
}

/* logo 样式 */
.logo-container {
  width: 140px;
  height: 45px;
  background: url(//www.dpfile.com/app/pc-common/i/logo_user.png) no-repeat;
  background-size: contain;
  background-position: left center;
}

/* 快捷菜单区域 */
.user-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.user-info > * {
  position: relative;
  font-size: 14px;
  color: #ddd;
  transition: color 0.3s ease;
  cursor: pointer;
}

.user-info > *:hover {
  color: orange;
}

.divider {
  font-size: 14px;
  color: #666;
  margin: 0 8px;
  user-select: none;
}

.user-link {
  font-size: 14px;
  color: #ddd;
  transition: color 0.3s ease;
}

.user-link:hover {
  color: orange;
}

/* 弹窗面板保持白色背景 */
.popover-panel {
  background-color: #fff;
  color: #333;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.popover-panel p {
  margin: 5px 0;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.popover-panel p:hover {
  color: orange;
}

.popover-panel .el-button {
  margin-top: 10px;
  font-size: 14px;
}

.user-info-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar-container {
  display: flex;
  justify-content: center;
  margin-right: 10px;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
}

.user-details .username {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

.user-details {
  font-size: 14px;
  color: #333;
}

.settings-container {
  margin-top: auto;
  text-align: right;
  width: 100%;
}

.settings-container span {
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
  transition: color 0.3s ease;
}

.settings-container span:hover {
  color: orange;
}

.badge-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-inline .el-badge__content {
  position: absolute;
  top: -6px;
  right: -10px;
  transform: scale(0.8);
}
</style>
